<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>系统管理员身份</title>
    <link rel="stylesheet" href="/static/admin/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/static/admin/css/global.css" media="all">
    <link rel="stylesheet" href="/static/admin/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/admin/css/table.css"/>
    <link rel="stylesheet" href="/static/admin/js/plugins/zTree/zTreeStyle.css" type="text/css">
</head>

<body>
<div class="admin-main">

    <blockquote class="layui-elem-quote">
        <form class="layui-form">
            <div class="layui-form">
                <div class="layui-inline">
                    <div class="layui-input-inline" style="width: 300px;">
                        <input class="layui-input" id="dataName" placeholder="关键字">
                    </div>
                </div>
                <div class="layui-inline">
                    <button id="search" type="button" class="layui-btn"><i class="layui-icon">&#xe615;</i> 查找</button>
                </div>
                <div class="layui-inline">
                    <button id="add" type="button" class="layui-btn"><i class="layui-icon">&#xe61f;</i>添加</button>
                </div>
            </div>
        </form>
    </blockquote>
    <fieldset class="layui-elem-field">
        <legend>系统管理员</legend>
        <div class="layui-field-box">
            <table class="site-table table-hover">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>身份标识</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="con">

                </tbody>
            </table>

        </div>
    </fieldset>
    <div class="admin-table-page">
        <div id="page" class="page">
        </div>
    </div>
</div>
<!-- 角色分配 -->
<div class="zTreeDemoBackground left" style="display: none" id="role">
    <input type="hidden" id="nodeid">
    <div>
        <ul id="treeType" class="ztree"></ul>
    </div>
    <div style="margin-left:126px;">
        <button type="button" class="layui-btn layui-btn-primary close-role-box">取消</button>
        <button type="button" class="layui-btn" id="postform">确认分配</button>
    </div>
</div>
<script type="text/javascript">
    zNodes = '';
</script>
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/static/admin/js/layeralert.js"></script>
<script type="text/javascript" src="/static/admin/js/plugins/zTree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="/static/admin/js/plugins/zTree/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="/static/admin/js/plugins/zTree/jquery.ztree.exedit-3.5.js"></script>
<!--模板 <a href="./edit/id/{{item.id}}" class="layui-btn layui-btn-small"><i class="layui-icon"></i></a> -->
<script type="text/html" id="conTemp">
    {{# layui.each(d.list, function(index, item){ }}
    <tr>
        <td>{{ item.id }}</td>
        <td>{{ item.rolename }}</td>
        <td>{{ item.c_time }}</td>
        <td>
            <button class="layui-btn layui-btn-small" onclick="javascript:giveQx({{item.id}})"><i class="layui-icon">&#xe62e;</i></button>
            <button class="layui-btn layui-btn-small" onclick="javascript:edit({{item.id}},'{{item.rolename}}')"><i class="layui-icon">&#xe642;</i></button>
            <button class="layui-btn layui-btn-small" onclick="javascript:delData({{item.id}})"><i class="layui-icon"></i></button>
        </td>
    </tr>
    {{# }); }}
</script>
<script>
    layui.config({
        base: '/static/admin/plugins/layui/modules/'
    });
    var layer, paging;
    layui.use(['icheck', 'layer', 'paging', 'form', 'laydate'], function () {
        layer = layui.layer;
        paging = layui.paging();
        $('input').iCheck({
            checkboxClass: 'icheckbox_flat-green'
        });

        paging.init({
            url: '/role/index', //地址
            elem: '#con', //内容容器
            optionsId: ['dataName'],
            tempElem: '#conTemp', //模块容器
            pageConfig: { //分页参数配置
                elem: '#page', //分页容器
                pageSize: 14 //分页大小
            },
            success: function () { //渲染成功的回调
                //alert('渲染成功');
            },
            fail: function (msg) { //获取数据失败的回调
                //alert('获取数据失败')
            },
            complate: function () { //完成的回调
                //alert('处理完成');
            }
        });

    });

    //删除
    function delData(id) {
        layer.confirm('确认删除此信息' + '?', {icon: 3, title: '提示'}, function (index) {
            $.ajax({
                type: "POST",
                url: './del',
                data:  {id:id},
                async: true,
                beforeSend: function () {
                    jz = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
                },
                error: function (request) {
                    layer.close(jz);
                    layer.alert('网络错误',{icon:2}, function(index){
                        layer.close(index);
                    });
                },
                success: function (data) {
                    layer.close(jz);
                    //关闭加载层
                    if (data.code == 1) {
                        layer.msg(data.msg, {
                            icon: 1,
                            time: 1500
                        });
                        paging.get({
                            pageIndex: 1,
                            pageSize: 14,
                            options: ['dataName']
                        });
                    } else if (data.code == -1) {
                        window.location.href = '/login/login';
                    } else {
                        layer.alert(data.msg);
                    }
                }
            });

        })
    }

    //添加
    $('#add').click(function () {
        var content = "<form class='layui-form' style='margin-top:30px;'>"
                +"<div class='layui-form-item'><label class='layui-form-label'>角色名</label><div class='layui-input-inline'><input type='text' id='rolename' placeholder='请输入角色名' autocomplete='off' class='layui-input'></div><div class='layui-form-mid layui-word-aux'>长度1~20位</div></div>"
                +"</form>";
        alertForm(layer, paging, '添加角色', content, ['500px', '200px'], '/role/add', ['rolename'],['dataName']);
    });

    //修改
    function edit(id, roleName){
        var content = "<form class='layui-form' style='margin-top:30px;'>"
                +"<div class='layui-form-item'><label class='layui-form-label'>角色名</label><div class='layui-input-inline'><input type='text' id='rolename' placeholder='请输入角色名' value='"+roleName+"' autocomplete='off' class='layui-input'></div><div class='layui-form-mid layui-word-aux'>长度1~20位</div></div>"
                +"<input type='hidden' id='id' value='"+id+"'>"
                +"</form>";
        alertForm(layer, paging, '修改角色', content, ['500px', '200px'], '/role/edit', ['rolename', 'id'],['dataName']);
    }

    //修改权限
    //分配权限
    var index = '';
    var index2 = '';
    function giveQx(id){
        $("#nodeid").val(id);
        //加载层
        index2 = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2

        //获取权限信息
        $.post('./giveAccess', {'type' : 'get', 'id' : id}, function(res){
            layer.close(index2);
            if(res.code == 1){
                zNodes = JSON.parse(res.data);  //将字符串转换成obj

                //页面层
                index = layer.open({
                    type: 1,
                    area:['350px', '600px'],
                    title:'权限分配',
                    skin: 'layui-layer-demo', //加上边框
                    content: $('#role')
                });
                //设置位置
                layer.style(index, {
                    top: '150px'
                });

                //设置zetree
                var setting = {
                    check:{
                        enable:true
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    }
                };

                $.fn.zTree.init($("#treeType"), setting, zNodes);
                var zTree = $.fn.zTree.getZTreeObj("treeType");
                zTree.expandAll(true);

            }else if(res.code == -1){
                window.location.href = '/admin/login/login';
            }else{
                layer.alert(res.msg);
            }

        });
    }
    $('.close-role-box').click(function() {
        layer.close(index);
    })
    //确认分配权限
    $("#postform").click(function(){
        var zTree = $.fn.zTree.getZTreeObj("treeType");
        var nodes = zTree.getCheckedNodes(true);
        var NodeString = '';
        $.each(nodes, function (n, value) {
            if(n>0){
                NodeString += ',';
            }
            NodeString += value.id;
        });
        var id = $("#nodeid").val();
        //写入库
        $.post('./giveAccess', {'type' : 'give', 'id' : id, 'rule' : NodeString}, function(res){
            layer.close(index);
            if(res.code == 1){
                layer.msg(res.msg, {
                    icon: 1,
                    time: 1500
                });
            }else if(res.code == -1){
                window.location.href = '/admin/login/login';
            }else{
                layer.alert(res.msg);
            }

        }, 'json')
    })


</script>
</body>

</html>
